@import '~@hi-ui/core-css/lib/index.scss';

$solid-color-map: (
  'primary': (
    'normal': use-color-mode('primary'),
    'hover': use-color-mode('primary', 400)
  ),
  'warning': (
    'normal':use-color-mode('warning'),
    'hover':use-color-mode('warning', 400)
  ),
  'success': (
    'normal':use-color-mode('success'),
    'hover':use-color-mode('success', 400)
  ),
  'danger': (
    'normal': use-color-mode('danger'),
    'hover': use-color-mode('danger', 400)
  ),
  'default': (
    'normal': use-color('gray', 400),
    'hover': use-color('gray', 300)
  )
) !default;

$line-color-map: (
  'primary': (
    'text': use-color-mode('primary'),
    'border': use-color-mode('primary', 200),
    'hover-text': use-color-mode('primary', 400),
    'hover-border': use-color-mode('primary', 100)
  ),
  'warning': (
    'text':use-color-mode('warning'),
    'border':use-color-mode('warning', 200),
    'hover-text':use-color-mode('warning', 400),
    'hover-border':use-color-mode('warning', 100)
  ),
  'success': (
    'text':use-color-mode('success'),
    'border':use-color-mode('success', 200),
    'hover-text':use-color-mode('success', 400),
    'hover-border':use-color-mode('success', 100)
  ),
  'danger': (
    'text': use-color-mode('danger'),
    'border': use-color-mode('danger', 200),
    'hover-text': use-color-mode('danger', 400),
    'hover-border': use-color-mode('danger', 100)
  ),
  'default': (
    'text': use-color('gray', 700),
    'border': use-color('gray', 300),
    'hover-text': use-color('gray', 600),
    'hover-border': use-color('gray', 200)
  )
) !default;

$filled-color-map: (
  'primary': (
    'color': use-color-mode('primary'),
    'background':use-color-mode('primary', 50),
    'hover-background':use-color-mode('primary', 100)
  ),
  'warning': (
    'color':use-color-mode('warning'),
    'background':use-color-mode('warning', 50),
    'hover-background':use-color-mode('warning', 100),
  ),
  'success': (
    'color':use-color-mode('success'),
    'background':use-color-mode('success', 50),
    'hover-background':use-color-mode('success', 100)
  ),
  'danger': (
    'color': use-color-mode('danger'),
    'background': use-color-mode('danger', 50),
    'hover-background': use-color-mode('danger', 100)
  ),
  'default': (
    'color': use-color('gray', 700),
    'background': use-color('gray', 100),
    'hover-background': use-color('gray', 200)
  )
) !default;

$prefix: '#{$component-prefix}-tag' !default;

$shape-square: '#{$prefix}--shape-square' !default;
$shape-round: '#{$prefix}--shape-round' !default;

.#{$prefix} {
  display: inline-flex;
  user-select: none;
  transition-property: opacity;
  transition-duration: use-motion-duration('normal');
  transition-timing-function: use-motion-bezier('normal');
  position: relative;
  align-items: center;

  // 实心 为 彩色底+白色字
  &--appearance-solid {
    color: use-color-static('white');

    @each $key, $value in $solid-color-map {
      &.#{$prefix}--type-#{$key} {
        background: map-get($value, 'normal');

        &.#{$prefix}--hover-enable:hover {
          background: map-get($value, 'hover');
        }
      }
    }
  }

  &--appearance-filled {
    @each $key, $value in $filled-color-map {
      &.#{$prefix}--type-#{$key} {
        color: map-get($value, 'color');
        background: map-get($value, 'background');

        &.#{$prefix}--hover-enable:hover {
          background: map-get($value, 'hover-background');
        }
      }
    }
  }

  &--appearance-line {
    @each $key, $value in $line-color-map {
      &.#{$prefix}--type-#{$key} {
        color: map-get($value, 'text');
        border: #{get-border-size('normal')} map-get($value, 'border');
        box-sizing: border-box;

        &.#{$prefix}--hover-enable:hover {
          color: map-get($value, 'text-hover');
          border-color: map-get($value, 'border-hover');
        }
      }
    }
  }

  &--size-sm {
    height: use-height-size(5);
    font-size: use-text-size('sm');

    &.#{$shape-square} {
      border-radius: use-border-radius('sm');
    }

    &.#{$shape-round} {
      border-radius: use-border-radius('full');
    }
  }

  &--size-md {
    height: use-height-size(6);
    font-size: use-text-size('sm');

    &.#{$shape-square} {
      border-radius: use-border-radius('normal');
    }

    &.#{$shape-round} {
      border-radius: use-border-radius('full');
    }
  }

  &--size-lg {
    height: use-height-size(8);
    font-size: use-text-size('normal');

    &.#{$shape-square} {
      border-radius: use-border-radius('normal');
    }

    &.#{$shape-round} {
      border-radius: use-border-radius('full');
    }
  }

  @mixin edit-shadow {
    box-shadow: 0 0 4px use-color-mode('primary');
  }

  &--editable {
    &:hover {
      opacity: 1;
    }
  }

  &--in-edit {
    @include edit-shadow();

    .#{$prefix}__content {
      opacity: 0;
    }

    .#{$prefix}__content-wrapper {
      min-width: 36px;
    }
  }

  &__content-wrapper {
    position: relative;
    padding: 0 use-spacing(4);
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  &--appearance-line { /* stylelint-disable-line */
    .#{$prefix} {
      &__content-wrapper {
        padding: 0 calc(#{use-spacing(4)} - 1px);
      }
    }
  }

  &__content {
    @include ellipsis();

    max-width: 100%;
  }

  &__input {
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    width: calc(100% - #{use-spacing(8)});
    position: absolute;
    line-height: inherit;
    left: use-spacing(4);
    top: 50%;
    transform: translateY(-50%);
    z-index: use-zindex('absolute');
  }

  &__close-button {
    height: calc(100% - #{use-spacing(4)});
    padding: 0 use-spacing(2);
    border-left: use-border-size('normal') use-color('gray', 300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: use-text-size('lg');
    cursor: pointer;
  }
}
